<template>
  <div class="app">
    <Top>
      <template v-slot:list>
        <div>
          <div class="left" @click="logo">
            <img src="./assets/images/logo.png" alt="">
            <br>
            <span class="left-text">博客系统</span>
            <br>
            <span class="left-text">CoderLwy</span>
          </div>
          <router-link class="list-group-item" to="/addBlog" active-class="active">添加博客</router-link>
          <router-link class="list-group-item" to="/blogList" active-class="active">博客列表</router-link>
        </div>
      </template>
    </Top>
      <router-view></router-view>
    <Bottom/>
  </div>
</template>

<script>
import Top from './components/Top'
import Bottom from './components/Bottom'
export default {
  name: 'App',
  components: {
    Top,
    Bottom,
  },
  methods: {
    logo(){
      this.$router.push({path:'/'})
    }
  },
}
</script>

<style>
  *{padding: 0;margin: 0;font-family: '微软雅黑';font-size: 16px;}
  a{text-decoration: none;}
  ul,ol{list-style: none;}
  .app{width: 1000px;margin: 0 auto;border: 1px solid #36a981;box-shadow: 0 0 20px rgba(65,184,131,0.5);}
  .list-group-item{float: right;margin-right: 30px;padding: 5px;color: white;margin-top: 20px;}
  .active{color:#36a981 ;border: 1px solid #36a981;background-color: white;border-radius: 6px;}
  .message{min-height: 300px;}
  .left{float: left;cursor: pointer;}
  img{width: 50px;margin-left: 10px;margin-top: 15px;position: absolute;}
  .left-text{position:absolute;margin-left: 70px;color: white;}
</style>
